<template>
  <div class="information">
    <div>
      <ul class="information-wrapper">
        <li class="information-content">
          <div class="name">姓名</div>
          <el-input v-model="stuName"></el-input>
        </li>
        <li class="information-content">
          <div class="name">学号</div>
          <el-input v-model="stuNo"></el-input>
        </li>
        <li class="information-content">
          <div class="name">性别</div>
          <el-radio v-model="radio" label="1">男</el-radio>
          <el-radio v-model="radio" label="2">女</el-radio>
        </li>
        <li class="information-content">
          <div class="name">学院</div>
          <el-input v-model="stuCollege"></el-input>
        </li>
        <li class="information-content">
          <div class="name">专业</div>
          <el-input v-model="stuMajor"></el-input>
        </li>
        <li class="information-content">
          <div class="name">班级</div>
          <el-input v-model="stuClass" placeholder="例：19级计科2班"></el-input>
        </li>
        <li class="information-content">
          <div class="name">年级</div>
          <el-input v-model="stuGrade" placeholder="例：2019"></el-input>
        </li>
        <li class="information-content">
          <div class="name">目的地</div>
          <el-input v-model="destination"></el-input>
        </li>
        <li class="information-content">
          <div class="name">请假类型</div>
          <el-select class="type" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
        <li class="information-content">
          <div class="name">请假原因</div>
          <el-input v-model="leaveSeason"></el-input>
        </li>
        <li class="information-content">
          <div class="name">开始时间</div>
          <el-time-select
            placeholder="起始时间"
            v-model="startTime"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
            }"
          >
          </el-time-select>
        </li>
        <li class="information-content">
          <div class="name">结束时间</div>
          <el-time-select
            placeholder="结束时间"
            v-model="endTime"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
              minTime: startTime,
            }"
          >
          </el-time-select>
        </li>
        <li class="information-content">
          <div class="name">身份证号</div>
          <el-input v-model="idCard"></el-input>
        </li>
        <li class="information-content">
          <div class="name">本人联系电话</div>
          <el-input v-model="myNo"></el-input>
        </li>
        <li class="information-content">
          <div class="name">家长姓名</div>
          <el-input v-model="parentName"></el-input>
        </li>
        <li class="information-content">
          <div class="name">家长联系电话</div>
          <el-input v-model="parentNo"></el-input>
        </li>
        <li class="information-content">
          <div class="name">班主任姓名</div>
          <el-input v-model="classTeacherName"></el-input>
        </li>
        <li class="information-content">
          <div class="name">班主任联系电话</div>
          <el-input v-model="classTeacherNo"></el-input>
        </li>
        <li class="information-content">
          <div class="name">学院领导姓名</div>
          <el-input v-model="leaderName"></el-input>
        </li>
        <li>
          <div class="draw">
            <div class="write">
              <div class="img-write">手写签名</div>
              <vue-esign
                style="border: 1px black solid; margin-left: 10px"
                ref="esign"
                :width="170"
                :height="100"
                :isCrop="isCrop"
                :lineWidth="lineWidth"
                :lineColor="lineColor"
                :bgColor.sync="bgColor"
              />
              <div class="write-bu">
                  <button @click="handleReset">清空画板</button>
                  <button @click="handleGenerate">生成图片</button>
              </div>
            </div>
            <div class="look">
                <div class="img-look">预览图片</div>
                <img style="height: 100px;width: 170px;border: 1px solid #999;" :src="resultImg" alt="">
            </div>
          </div>
        </li>
      </ul>
      <div class="generate">
        <el-button type="success" style="width: 300px" @click="price"
          >一键生成</el-button
        >
        <!-- <el-button type="success" style="width: 300px" :class="{on:'/main'===$route.path}" @click="goTo('/main')">完成</el-button> -->
      </div>
    </div>
    <!-- <Main/> -->
  </div>
</template>

<script>
// import Public from '../../public'
// import Main from '../Main/index.vue'
export default {
  // components: {
  //     Main
  // },
  data() {
    return {
      lineWidth: 1,
      lineColor: "#000000",
      bgColor: "rgba(255,255,255,0)", //白色透明背景
      resultImg: "",
      isCrop: false,
      nameState: true,
      stuName: "",
      stuNo: "",
      radio: "1",
      stuCollege: "",
      stuMajor: "",
      stuClass: "",
      stuGrade: "",
      destination: "",
      startTime: "",
      endTime: "",
      idCard: "",
      myNo: "",
      parentNo: "",
      classTeacherName: "",
      leaveSeason: "",
      classTeacherNo: "",
      leaderName: "",
      parentName: "",
      options: [
        {
          value: "选项1",
          label: "事假",
        },
        {
          value: "选项2",
          label: "病假",
        },
        {
          value: "选项3",
          label: "其他",
        },
      ],
      value: "",
    };
  },
  methods: {
    price() {
      this.$router.push({
        name: "Main",
        params: {
          stuName: this.stuName,
          stuNo: this.stuNo,
          idCard: this.idCard,
          myNo: this.myNo,
          parentNo: this.parentNo,
          classTeacherName: this.classTeacherName,
          leaveSeason: this.leaveSeason,
          classTeacherNo: this.classTeacherNo,
          leaderName: this.leaderName,
          value: this.value,
          endTime: this.endTime,
          startTime: this.startTime,
          stuGrade: this.stuGrade,
          stuClass: this.stuClass,
          stuMajor: this.stuMajor,
          stuCollege: this.stuCollege,
          radio: this.radio,
          parentName: this.parentName,
          resultImg: this.resultImg
        },
      });
    },
    handleReset() {
      this.$refs["esign"].reset(); //清空画布
    },
    handleGenerate() {
      this.$refs["esign"].generate().then((res) => {
        this.resultImg = res; // 得到了签字生成的base64图片
        console.log(this.resultImg);
        // document.querySelector(".sign").remove();
        // document.querySelector(".sign-img").style.visibility = "visible";
      });
    },
    goTo(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style scoped>
.information {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.qianming {
  margin-left: 50px;
}
.type {
  margin-left: 10px;
}
.information-wrapper {
  display: flex;
  flex-direction: column;
}
.information-content {
  display: flex;
  flex-direction: row;
  margin: 20px 20px 0 0;
}
.name {
  width: 175px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.el-input {
  margin-left: 20px;
}
.el-radio {
  margin: 12px 0 0 10px;
}
.generate {
  margin-top: 20px;
  text-align: center;
}
.draw {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.write {
    margin-left: 100px;
    display: flex;
    flex-direction: column;
}
.look {
    margin-right: 100px;
    display: flex;
    flex-direction: column;
}
.img-write {
    margin-top: 20px;
    text-align: center;
}
.img-look,.write-bu {
    text-align: center;
}


</style>